<template>
  <view
    class="tn-title"
    :class="[titleClass]"
    :style="titleStyle"
  >
    <view
      class="tn-title__content"
      :class="[elementTypeClass]"
    >
      <!-- 左边垂直竖线 -->
      <view
        v-if="(align === 'left' || align === '') && elementType === 'leftVLine'"
        class="tn-title__element--lvl"
        :class="[elementClass]"
        :style="elementStyle"
      ></view>
      <!-- 左边圆点 -->
      <view
        v-if="(align === 'left' || align === '') && elementType === 'leftPoint'"
        class="tn-title__element--lp"
        :class="[elementClass]"
        :style="elementStyle"
      ></view>
      <!-- 文本内容 -->
      <view class="tn-title__content--title tn-text-ellipsis-1s">
        <view v-if="leftIcon" style="margin-right: 10rpx;"><tn-icon :icon="leftIcon" ></tn-icon></view>
        <slot></slot>
        <view v-if="rightIcon" style="margin-left: 10rpx;"><tn-icon :icon="rightIcon"></tn-icon></view>
      </view>
      <!-- 子标题 -->
      <view
        v-if="!!subTitle && subTitle !== ''"
        class="tn-title__sub-title"
        :class="[subTitleClass]"
        :style="subTitleStyle"
      >{{ subTitle }}</view>
      <!-- 底部横线 -->
      <view
        v-if="(align === 'left' || align === '') && elementType === 'bottomLine'"
        class="tn-title__element--bl"
        :class="[elementClass]"
        :style="elementStyle"
      ></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { titleProps } from '../../../types/tn-title'
import { ColorInfo } from '../../../types/tuniao-ui'
import { computed, watchEffect, CSSProperties } from 'vue'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'
import TnIcon from '../../tn-icon/src/Icon.vue'

const props = defineProps(titleProps)

const { generateColorInfo, splitColorInfo } = useComponentColor()
let componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
// 监听颜色变化实时修改颜色对应的属性
watchEffect(() => {
  componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
})

// 解析子标题颜色
const subTitleColor = computed<ColorInfo>(() => {
  return splitColorInfo('color', props?.subColor || '')
})
// 解析辅助元素颜色
const elementColor = computed<ColorInfo>(() => {
  return splitColorInfo('bg', props?.elementColor || '')
})

// 标题样式
const titleStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (props?.width) {
    style.width = handleValueWithUnit(props.width)
  }
  if (props?.height) {
    style.height = handleValueWithUnit(props.height)
  }

  if (props?.fontSize) {
    style.fontSize = handleValueWithUnit(props.fontSize)
  }
  if (componentColorInfo.style?.color) {
    style.color = componentColorInfo.style.color
  }
  if (componentColorInfo.style?.backgroundColor) {
    style.backgroundColor = componentColorInfo.style.backgroundColor
  }

  return Object.assign(style, props?.customStyle || {})
})
// 子标题样式
const subTitleStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (subTitleColor.value.type === 'style') {
    style.color = subTitleColor.value.value
  }
  return style
})
// 辅助元素样式
const elementStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (elementColor.value.type === 'style') {
    style.backgroundColor = elementColor.value.value
  }
  return style
})

// 对齐方式关联类信息
const alignClassMap: {
  [prop: string]: string
} = {
  left: 'tn-flex-col-start',
  center: 'tn-flex-col-center',
  right: 'tn-flex-col-end',
}
// 标题对应的类
const titleClass = computed<string>(() => {
  let clazz: string[] = []
  if (componentColorInfo.class.length > 0) {
    clazz.push(...componentColorInfo.class)
  }
  if (props?.fontBold) {
    clazz.push('tn-text-bold')
  }

  // 设置默认type
  if (props?.type) {
    clazz.push(`tn-type-${props.type}`)
  }

  // 设置对齐方式
  if (props?.align) {
    clazz.push(alignClassMap[props.align])
  } else {
    clazz.push(alignClassMap['left'])
  }
  return clazz.join(' ')
})
// 子标题对应的类
const subTitleClass = computed<string>(() => {
  let clazz: string[] = []
  if (subTitleColor.value.type === 'class') {
    clazz.push(subTitleColor.value.value)
  }
  return clazz.join(' ')
})
// 辅助元素对应的类
const elementClass = computed<string>(() => {
  let clazz: string[] = []
  if (elementColor.value.type === 'class') {
    clazz.push(elementColor.value.value)
  }
  return clazz.join(' ')
})

// 辅助元素类型对应的类
const elementTypeClass = computed<string>(() => {
  if (!!props?.elementType && (props.align === 'left' || props.align === '')) {
    if (props.elementType.startsWith('left')) {
    return 'tn-title__content--element-left'
    }
    if (props.elementType.startsWith('bottom')) {
      return 'tn-title__content--element-bottom'
    }
  }
  return ''
})
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';

.tn-title {
  position: relative;
  width: 100%;
  padding: 20rpx 30rpx;
  display: inline-flex;
  align-items: center;

  &__content {
    // width: 100%;
    position: relative;
    /* 辅助元素类型 start */
    &--element-left {
      padding-left: 20rpx;
    }
    &--element-bottom {
      padding-bottom: 20rpx;
    }
    /* 辅助元素类型 end */

    &--title {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      z-index: 1;
    }
  }

  &__sub-title {
    position: absolute;
    left: 25%;
    bottom: -30%;
    font-weight: bold;
    opacity: 0.5;
    color: $tn-main-color;
    white-space: nowrap;
  }
  /* 辅助元素 start */
  &__element {
    /* 左边垂直横线 */
    &--lvl {
      background-color: $tn-main-color;
      padding-right: 10rpx;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 8rpx;
        height: 80%;
        border-radius: 4rpx;
        background-color: inherit;
        transform: translateY(-50%);
      }
    }
    /* 左边点 */
    &--lp {
      background-color: $tn-main-color;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background-color: inherit;
        transform: translateY(-50%);
      }
    }
    /* 底部横线 */
    &--bl {
      background-color: $tn-main-color;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50%;
        max-width: 80rpx;
        height: 8rpx;
        border-radius: 4rpx;
        background-color: inherit;
        opacity: 0.6;
      }
    }
  }
  /* 辅助元素 end */
}
</style>
